<template>
  <div>
    <input
      v-model="input"
      @keyup.enter="submit"
      placeholder="请输入待办事项，回车添加"
    />
    <button @click="submit">添加</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useTodoStore } from '../stores/todo'

const input = ref('')
const todoStore = useTodoStore()

// 提交输入内容
function submit() {
  if (input.value.trim()) {
    todoStore.addTodo(input.value.trim())
    input.value = ''
  }
}
</script>

<style scoped>
div {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
input {
  flex: 1;
  padding: 10px 14px;
  margin-right: 12px;
  border: 1.5px solid #dcdfe6;
  border-radius: 8px;
  font-size: 16px;
  box-shadow: 0 1px 4px rgba(64,158,255,0.06);
  transition: border 0.2s, box-shadow 0.2s;
  background: #f8fbff;
  color: #222;
}
input:focus {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64,158,255,0.12);
}
input::placeholder {
  color: #222;
  opacity: 1;
}
button {
  padding: 10px 20px;
  border-radius: 8px;
  background: linear-gradient(90deg, #409eff 60%, #66b1ff 100%);
  color: #fff;
  font-weight: 600;
  border: none;
  box-shadow: 0 2px 8px rgba(64,158,255,0.10);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
button:hover:not(:disabled) {
  background: linear-gradient(90deg, #1976d2 60%, #409eff 100%);
  box-shadow: 0 4px 16px rgba(64,158,255,0.18);
}
button:disabled {
  background: #bcdcff;
  cursor: not-allowed;
}
</style> 